<template>
  <view>
    <z-paging ref="pagingRef" v-model="list" @query="queryList" use-chat-record-mode>
      <template #top>
        <MrCustom bg-color="bg-gradual-blue " is-back>
          <template #backText>
            返回
          </template>
          <template #content>
            <view v-if="chatFriends">
              <text class="text-bold"> {{ chatFriends.toUsername }}</text>
            </view>
          </template>
        </MrCustom>
      </template>
      <view v-for="(item,index) in list" :key="index">
        <chat-item :item="item" :friend="chatFriends"></chat-item>
      </view>
      <!-- 底部聊天输入框 -->
      <template #bottom>
        <chat-input-bar @send="doSend"/>
      </template>
    </z-paging>
  </view>

</template>

<script setup lang="ts">
import {ref} from "vue";


import {onLoad, onShow, onUnload} from "@dcloudio/uni-app";
import api from "@/api";
import ChatItem from "@/pages/common/chat/components/ChatItem.vue";
import ChatInputBar from "@/pages/common/chat/components/ChatInputBar.vue";
import {webSocketPathPrefix} from '/settings'
import MrCustom from "@/components/common/MrCustom.vue";

const prefix = webSocketPathPrefix
const pagingRef = ref()
const chatFriends = ref()
const socketOpen = ref(false)

onLoad((option) => {
  chatFriends.value = JSON.parse(decodeURIComponent(option.params)).chatFriends
})
onShow(() => {
  connect(encodeURI(chatFriends.value.fromUsername), encodeURI(chatFriends.value.toUsername))
})

onUnload(() => {
  if (socketOpen.value) {
    uni.closeSocket();
  }
  socketOpen.value = false
})
const connect = (fromUsername: any, toUsername: any) => {
  uni.connectSocket({
    url: prefix + fromUsername + '/' + toUsername,
    success: () => {
      uni.onSocketMessage((res) => {
        let tmp = JSON.parse(res.data)
        pagingRef.value.addChatRecordData({
          createTime: '',
          fromUsername: chatFriends.value?.toUsername,
          fromName: chatFriends.value?.toName,
          toUsername: chatFriends.value?.fromUsername,
          toName: chatFriends.value?.fromName,
          content: tmp.message,
          type: tmp.chatType,
          size: tmp.size,
        });
      })
      uni.onSocketOpen(() => {
        console.log('连接成功')
        socketOpen.value = true
      })
      uni.onSocketClose(function (res) {
        console.log(' 连接关闭！');
        socketOpen.value = false
      });
    }
  })
}
/**
 * WebSocket 发送消息
 * 聊天列表添加显示
 * @param msg
 * @param type
 * @param size
 */
const doSend = (msg: any, type: any, size: any) => {
  let params = {
    msg: msg,
    type: type,
    size: size
  }
  uni.sendSocketMessage({
    data: JSON.stringify(params)
  })
  pagingRef.value.addChatRecordData({
    createTime: '',
    fromUsername: chatFriends.value?.fromUsername,
    fromName: chatFriends.value?.fromName,
    fromAvatar: chatFriends.value?.fromAvatar,
    toUsername: chatFriends.value?.toUsername,
    toName: chatFriends.value?.toName,
    toAvatar: chatFriends.value?.toAvatar,
    content: msg,
    type: type,
    size: size,
  });
}

const list = ref()
const queryList = (pageNo: any, pageSize: any) => {
  //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  //模拟请求服务器获取分页数据，请替换成自己的网络请求
  api.chat.queryChatList({
    pageNo: pageNo,
    pageSize: pageSize,
    toUsername: chatFriends.value?.toUsername
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      pagingRef.value.complete(tmp);
    }
  })
}


</script>

<style scoped>


</style>